<template>
  <div class="admincomplaint" data-v-admincomplaint>
    <div class="menu">
      <div class="menu-list">
        <h2 style="font-size: 20px; font-weight: 500">投诉列表</h2>
      </div>
      <!-- <div class="menu-list">
        <span>视频ID</span>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchForm.videoId"
          class="menu-item"
        >
        </el-input>
      </div>
      <div class="searchbtn">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div> -->
    </div>

    <div class="content">
      <div class="table">
        <el-table :data="currentComplaintList" style="width: 100%">
          <el-table-column label="视频ID" prop="id"> </el-table-column>
          <el-table-column label="被举报者" prop="violator"> </el-table-column>
          <el-table-column label="举报者" prop="whistleblower">
          </el-table-column>
          <el-table-column label="违规行为" prop="why"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="openComment(scope.$index, scope.row)"
                >查看评论</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      class="commentDialogVisible"
      title="红色高亮为举报内容"
      :visible.sync="commentDialogVisible"
      width="50%"
      center
    >
      <div class="comment-list">
        <section class="comment-item">
          <div class="comment-item-left">
            <img :src="currentComment.parent.user_pic" alt="" />
          </div>

          <div class="comment-item-right">
            <div class="comment-item-right-top">
              <span>{{ currentComment.parent.username }}</span>
            </div>
            <div class="comment-item-right-content">
              <p
                :class="[
                  currentCommentId == currentComment.parent.id
                    ? 'isComplaint'
                    : '',
                ]"
                style="white-space: pre-line"
              >
                {{ currentComment.parent.comment }}
              </p>
            </div>
            <div class="comment-item-right-bottom">
              <i class="iconfont">{{ currentComment.parent.comment_date }}</i>
            </div>

            <ul class="children-comment">
              <li
                v-for="item in currentComment.children"
                :key="item.id"
                class="children-comment-list"
              >
                <div class="children-comment-list-left">
                  <img :src="item.user_pic" alt="" />
                </div>
                <div class="children-comment-list-right">
                  <div class="children-comment-list-right-top">
                    <span>{{ item.username }}</span>
                    <span>@{{ item.reply_username }}:</span>
                  </div>
                  <div class="children-comment-list-right-content">
                    <p
                      :class="[
                        currentCommentId == item.id ? 'isComplaint' : '',
                      ]"
                      style="white-space: pre-line"
                    >
                      {{ item.comment }}
                    </p>
                  </div>
                  <div class="children-comment-list-right-bottom">
                    <i class="iconfont">{{ item.comment_date }}</i>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </section>
      </div>

      <div class="radio-item">
        <span class="title">选择审核结果</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio :label="-1">无违规</el-radio>
          <el-radio :label="1">有违规</el-radio>
        </el-radio-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateComplaintList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminComplaint",
  data: function () {
    return {
      searchForm: {
        videoId: "",
      },

      // 未审核的评论列表
      complaintList: [],

      currentComplaintList: [],

      currentComment: {
        parent: {},
        children: [],
      },

      total: 0,
      pageSize: 2,
      currentPage: 1,

      commentDialogVisible: false,
      radio: "",

      currentCommentId: "",
      currentComplaintId: "",
    };
  },

  created() {
    this.getComplaintList();
  },

  methods: {
    openComment(index, row) {
      // console.log(row.comment_id);
      // console.log(row);
      this.commentDialogVisible = true;
      this.currentCommentId = row.comment_id;
      this.currentComplaintId = row.id;
      this.getCommentList(row.comment_id, row.parent_id);
    },

    getComplaintList() {
      this.axios
        .get("admin/getComplaintList")
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.complaintList = response.data.data;
            this.total = response.data.total;
            this.currentComplaintList = this.complaintList.slice(
              (this.currentPage - 1) * this.pageSize,
              (this.currentPage - 1) * this.pageSize + this.pageSize
            );
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getCommentList(commentId, parentId) {
      this.axios
        .get("admin/getCurrentComment", {
          params: {
            comment_id: commentId,
            parent_id: parentId,
          },
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.currentComment = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;

      let start = (val - 1) * this.pageSize;
      this.currentComplaintList = this.complaintList.slice(
        start,
        start + this.pageSize
      );
    },

    updateComplaintList() {
      // console.log(this.radio, this.currentCommentId);
      if (this.radio == "") {
        return this.$message({
          message: "请操作",
          type: "warning",
        });
      }

      this.axios
        .post("admin/updateComplaintList", {
          pass: this.radio,
          id: this.currentComplaintId,
          comment_id: this.currentCommentId,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.commentDialogVisible = false;
            this.$message({
              message: response.data.msg,
              type: "warning",
            });

            // console.log(this.currentComplaintList);

            if (this.currentComplaintList.length === 1) {
              // console.log(this.currentPage);
              if (this.currentPage > 1) {
                this.currentPage--;
              }
              this.getComplaintList();
            } else {
              this.getComplaintList();
            }
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.el-tooltip__popper {
  max-width: 30vw;
  font-size: 16px;
}

.commentDialogVisible {
  .radio-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .title {
      padding: 15px 0;
      font-size: 16px;
      color: #99a2aa;
    }

    .radio-box {
      font-size: 16px;

      .el-radio__label {
        font-size: 16px;
        color: #333;
      }
    }
  }

  .comment-list {
    width: 100%;
    height: 600px;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }

    .comment-item {
      display: flex;
      justify-content: space-around;
      width: 100%;
      padding: 10px 0;

      .comment-item-left {
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .comment-item-right {
        width: 92%;
        padding-bottom: 15px;
        // border-bottom: 1px solid #dcdfe6;

        .comment-item-right-top {
          span:nth-child(1) {
            font-size: 16px;
            color: rgb(251, 114, 153);
            padding-right: 10px;
          }

          span:nth-child(2) {
            font-size: 15px;
            color: #757575;
          }
        }

        .comment-item-right-content {
          padding: 10px 0;
        }

        .comment-item-right-bottom {
          i {
            font-size: 15px;
            color: #757575;
            cursor: pointer;
          }

          i:nth-child(1) {
            padding-right: 20px;
          }

          i::before {
            margin-right: 5px;
          }
        }

        .children-comment {
          width: 100%;

          .children-comment-list {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 10px 0;

            .children-comment-list-left {
              img {
                display: inline-block;
                width: 40px;
                height: 40px;
                object-fit: cover;
                border-radius: 50%;
              }
            }

            .children-comment-list-right {
              width: 93%;
              // padding-bottom: 15px;
              // border-bottom: 1px solid #dcdfe6;

              .children-comment-list-right-top {
                span:nth-child(1) {
                  font-size: 16px;
                  color: rgb(251, 114, 153);
                  padding-right: 6px;
                }

                span:nth-child(2) {
                  font-size: 14px;
                  color: #00a1d6;
                }
              }

              .children-comment-list-right-content {
                padding: 10px 0;
                font-size: 16px;

                p {
                  i {
                    margin-right: 5px;
                    font-style: normal;
                    color: #00a1d6;
                  }
                }
              }

              .children-comment-list-right-bottom {
                i {
                  font-size: 13px;
                  color: #757575;
                  cursor: pointer;
                }

                i:nth-child(1) {
                  padding-right: 20px;
                }

                i::before {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.isComplaint {
  // background-color: orangered;
  color: red;
}
</style>>

<style lang="scss" scoped>
.admincomplaint[data-v-admincomplaint] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px;

  .menu {
    display: flex;
    width: 100%;
    height: 80px;
    padding: 0 10px;
    background-color: #e3e3e3;

    .menu-list {
      display: flex;
      align-items: center;
      width: 340px;
      margin-right: 18px;

      span {
        font-size: 18px;
        margin-right: 16px;
      }

      .menu-item {
        flex: 1;
      }
    }

    .searchbtn {
      display: flex;
      align-items: center;
      flex: 1;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #e3e3e3;

    .table {
      width: 100%;
      flex: 1;
    }

    .pagination {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
    }
  }
}
</style>